<template>
  <ve-card :title="item.itemName" type="none" :fold="false">
    <template #status>
      <view class="card-status">
        <ve-tag class="ve-tag" color="#f53f3f" background="#ffece8" plain v-if="item.feeStatusName" :title="item.feeStatusName" />
        <ve-tag class="ve-tag" color="#3491fa" background="#e8f7ff" plain v-if="item.feeTypeName" :title="item.feeTypeName" />
        <ve-tag class="ve-tag" color="#ff7d00" background="#fff7e8" plain v-if="item.costTypeName" :title="item.costTypeName" />
        <ve-tag class="ve-tag" color="#722ed1" background="#f5e8ff" plain v-if="item.payTypeName" :title="item.payTypeName" />
      </view>
    </template>
    <template #extra>
      <view v-if="choose">
        <image class="icon-choose" v-if="!item.choose" src="@/static/icons/icon-checkbox.png"></image>
        <image class="icon-choose" v-else src="@/static/icons/icon-checkbox-select.png" />
      </view>
    </template>
    <template v-if="!choose">
      <ve-cell label="本次结算金额">
        <ve-input-number
          placeholder="请输入"
          :precision="2"
          :class="item.errorStatus ? 'text-red' : ''"
          @clear="blurFn(0, item)"
          @blur="blurFn($event, item)"
          @click.stop
          v-model="item.settlementAmount"
        />
        <text style="margin-left: 20rpx">元</text>
      </ve-cell>
      <ve-cell priceAlign="right" v-if="item.errorStatus" class="errorStatus"> {{ item.errorMsg }} </ve-cell>
    </template>

    <view class="divider"></view>
    <view :class="!choose ? 'viewports-content' : ''">
      <ve-cell label="总额">{{ unitVal(item.amount, '元') }}</ve-cell>
      <ve-cell label="实结" priceAlign="right">{{ item.payAmount || 0 }} 元</ve-cell>
      <ve-cell label="未结" priceAlign="right">
        <text class="text-red">{{ item.waitPayAmount || 0 }} 元</text></ve-cell
      >
      <ve-cell label="生成节点" priceAlign="right">{{ item.createNodeName || '-' }}</ve-cell>
    </view>
  </ve-card>
</template>
<script setup>
  import { unitVal } from '@/utils'
  defineProps({
    item: Object,
    choose: {
      type: Boolean,
      default: false,
    },
  })
  // 失焦
  const blurFn = (e, record) => {
    record.errorStatus = e > record.waitPayAmount || e === ''
    if (e === '') {
      record.errorMsg = '请填写本次结算金额'
    } else if (e > record.waitPayAmount) {
      record.errorMsg = '本次结算金额需小于等于未结金额'
    } else {
      record.errorMsg = ''
    }
  }
</script>
<style scoped lang="less">
  .viewports-content {
    padding: 24rpx;
    background: #f7f8fa;
    margin-bottom: 24rpx;
  }
  :deep(.ve-card-header) {
    background: linear-gradient(270deg, #ffffff 0%, #d5e5ff 100%);
  }
  .text-red {
    color: #f53f3f;
  }
  .icon-choose {
    width: 36rpx;
    height: 36rpx;
    text-align: right;
  }
  .ve-tag {
    margin-left: 16rpx;
  }
  .errorStatus {
    :deep(.ve-cell-content) {
      color: #f53f3f !important;
      font-size: 24rpx;
      justify-content: flex-end;
    }
  }
  :deep(.ve-card-header-title) {
    align-items: flex-start;
    flex-direction: column;
  }
  :deep(.ve-tag) {
    margin-right: 16rpx;
    margin-left: 0;
  }
</style>
